<template>
  <div class="home-container">
    <el-container>
      <el-header>
        <home-header></home-header>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <home-aside></home-aside>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 
        路由导航：
        声明式路由导航 router-link
        编程式路由导航

        this.$router.push
        this.$router.replace
        this.$router.back()
        this.$router.forward()
        this.$router.go

        history 历史记录
        history.pushState
        history.replaceState
        history.go
        history.forward
        history.back





     -->
  </div>
</template>

<script>
import HomeAside from "../../components/home/HomeAside.vue";
import HomeHeader from "../../components/home/HomeHeader.vue";

export default {
  methods: {},
  components: {
    HomeHeader,
    HomeAside,
    // "el-button": Button,
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  height: 100%;
  .el-container {
    height: 100%;
    .el-header {
      background-color: #b3c0d1;
      color: #333;
      height: 100px;
    }

    .el-aside {
      background-color: #d3dce6;
    }

    .el-main {
      background-color: #e9eef3;
    }
  }
}
</style>